<template>
  <div class="dashboard">
    <section class="hero">
      <p class="intro">面向小学至高中，覆盖核心知识点，支持智能组卷、个性化诊断与错题巩固，帮助高效发现薄弱项与提升成绩。</p>
      <ul class="highlights">
        <li>全面覆盖教材与题型</li>
        <li>智能组卷与难度控制</li>
        <li>历史记录与进度追踪</li>
      </ul>
    </section>

    <section class="modules">
      <el-row :gutter="16">
        <el-col :xs="24" :md="12">
          <el-card class="module-card">
        <template #header>
          <div class="card-header">
            <h3>📝 智能组卷测试</h3>
          </div>
        </template>
        <div class="card-content">
          <p>按年级与知识点自动生成试卷，试题去重并按题型排序。</p>
          <el-button type="primary" size="large" @click="navigateToTest">开始测试</el-button>
        </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-card class="module-card">
            <template #header>
              <div class="card-header">
                <h3>📚 历史记录</h3>
              </div>
            </template>
            <div class="card-content">
              <p>查看历史测试成绩与错题集，跟踪学习进度与薄弱点。</p>
              <el-button size="large" @click="navigateToHistory">查看历史记录</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToTest = () => {
  router.push('/math-test')
}
const navigateToHistory = () => {
  router.push('/history')
}
</script>

<style scoped>
.dashboard {
  padding: 32px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.hero {
  text-align: center;
  background: linear-gradient(180deg, #f5f7fa, #ffffff);
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 32px 24px;
}

.hero h1 {
  margin: 0 0 12px;
  color: #1f2d3d;
}

.intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #1f2d3d;
}

.highlights {
  display: inline-flex;
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #606266;
}

.modules {
  margin-top: 28px;
}

.module-card {
  text-align: center;
  height: 100%;
}

.card-header h3 {
  margin: 0;
  color: #333;
}

.card-content {
  padding: 18px;
}

.card-content p {
  color: #666;
  margin-bottom: 18px;
}
</style>